<template>
  <div class="container">
    练习模块:

    <div>自己data的:  {{ msg }}</div>
    <div>--------------全局</div>
    <!-- getters 属性 -->
    <div style="color: blue;">全局vuex的getter属性: 我叫{{ $store.getters.uname }}, 存款{{ $store.getters.age }} 万</div>
    <!-- state 属性 -->
    <div>{{ $store.state.message }}</div>

    <button @click="changeFn">改全局的message</button>

    <!-- -------------------------------------------------- -->

    <div>--------------user模块</div>
    <!-- getters 属性 -->
    <div style="color: blue;">模块vuex的getter属性: 我叫{{ $store.getters.userName }}, 今年{{ $store.getters.userAge }} </div>
    <!-- state 属性 -->
    <div>{{ $store.state.user.message }}</div>

    <button @click="changeUserFn">改user模块的message</button>
    <br><br>
    <div style="background-color: palegreen;">总结:
      <p>
        1.定义vuex数据在state下定义,<br>
        2.修改state的数据只能通过mutations定义的方法修改<br>
        3.如果是异步修改,必须通过actions调用mutations修改<br>
        4.通过commit调用mutations<br>
        5.通过dispatch调用actions
      </p>
    </div>
    <div>mapState辅助写法:{{ message }}</div>
    <div>mapGetters辅助写法:{{ uname }}, {{ age }}</div>
  </div>
</template>
<script>
// 1.引入对应的辅助函数
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  data() {
    return {
      msg: '111'
    }
  },
  // 辅助用法
  computed: {
    ...mapState({
      message: state => state.message
    }),
    ...mapGetters(['uname', 'age'])
  },
  // 麦色死
  methods: {
    // 辅助函数写法
    ...mapMutations({
    //   'changeFn1': 'changeMessage'
    }),
    ...mapActions({
    //   'changeFn1': 'changeMessageSync'
    }),
    // 全局
    changeFn() {
      // 不要在这直接修改state的数据 (只会页面更新,vuex实际上不会更新)

      // 同步修改
      // this.$store.commit('changeMessage', Date.now())
      // 辅助写法
      //   this.changeFn1(Date.now())
      // 异步修改
      // this.$store.dispatch('changeMessageSync', Date.now())
      // 辅助写法
    //   this.changeFn1(Date.now())
    },
    // user模块
    changeUserFn() {
      // 需要开启命名空间
      // 同步修改
    //   this.$store.commit('user/changeUserFn')
      // 异步修改
    //   this.$store.dispatch('user/changeUserFn')
    }
  }
}
</script>
